<script setup>
// #导出vue方法
import { ref } from "vue";
// -------------------------------------------------------------------
// 组件引入
import WenDynamicForm from "../components/wen-dynamic-form/dynamic-form.vue";

// -------------------------------------------------------------------
const testData = ref([]);

testData.value = [
	{
		type: "input",
		label: "昵称",
		key: "username",
		placeholder: "姓名，只能为中文",
		warningTxt: "请输入用户昵称",
		rules: ["required"],
	},
	{
		type: "radio",
		label: "性别",
		key: "gender",
		placeholder: "请选择性别",
		options: ["男", "女"],
		warningTxt: "未选择性别",
		rules: ["required"],
	},
	{
		type: "textarea",
		label: "备注",
		key: "remarks",
		placeholder: "请输入备注信息",
	},
];
</script>

<template>
	<div class="test-page">
		<div class="test-from">
			<WenDynamicForm :formData="testData" />
		</div>
	</div>
</template>

<style scoped lang="less">
.test-page {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.test-from {
	width: 500px;
	height: 800px;
}
</style>
